<script lang="ts" setup>
import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Icon } from '@iconify/vue';

const loading = ref(false);
const magicApiUrl = ref('http://localhost:48080/magic/web');

// 加载iframe
function handleRefresh() {
  loading.value = true;
  // 模拟加载时间
  setTimeout(() => {
    loading.value = false;
  }, 1000);
}

// 打开新窗口
function handleOpenNewTab() {
  window.open(magicApiUrl.value, '_blank');
}
</script>

<template>
  <Page auto-content-height>
    <div class="magic-api-container">
      <a-card title="在线接口开发" :loading="loading">
        <template #extra>
          <a-space>
            <a-button @click="handleRefresh">
              <template #icon>
                <Icon icon="ant-design:reload-outlined" />
              </template>
              刷新
            </a-button>
            <a-button type="primary" @click="handleOpenNewTab">
              <template #icon>
                <Icon icon="ant-design:export-outlined" />
              </template>
              新窗口打开
            </a-button>
          </a-space>
        </template>

        <div class="iframe-wrapper">
          <iframe
            :src="magicApiUrl"
            frameborder="0"
            width="100%"
            height="800px"
            class="magic-api-iframe"
          >
            您的浏览器不支持iframe，请
            <a :href="magicApiUrl" target="_blank">点击这里</a> 在新窗口中打开
          </iframe>
        </div>
      </a-card>
    </div>
  </Page>
</template>

<style scoped>
.magic-api-container {
  height: 100%;
}

.iframe-wrapper {
  width: 100%;
  height: 800px;
  overflow: hidden;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.magic-api-iframe {
  display: block;
  outline: none;
  border: none;
}
</style>
